import { Button, Card, Form, Input, Select } from 'antd'
import form from 'antd/lib/form'
import FormItem from 'antd/lib/form/FormItem'
import { store } from '@/app/store'
import {
  category1List,
  category2List,
  category3List,
  getCategory1List,
  getCategory2List,
  getCategory3List,
  setCategory2id,
  setCategory3id,
  category1id as getcategory1id,
  category2id as getcategory2id,
  category3id as getcategory3id,
} from '@/app/category'
import React, { useEffect, useState } from 'react'
import { categoryList } from '@/api/Product/category'
interface prop {
  disabled?: boolean
}
function Category(props: prop) {
  interface ListType {
    label: string
    value: number
  }
  interface caList {
    ca1List?: ListType[]
    ca2List?: ListType[]
    ca3List?: ListType[]
  }
  const [categoryFrom] = form.useForm()
  const storeData = store.getState()
  const [lazy, setlazy] = useState({})
  const [showList, setList] = useState<caList>()
  const category1ListData = category1List(storeData)
  const category2ListData = category2List(storeData)
  const category3ListData = category3List(storeData)
  // 监视一二级数据变动
  const category1id = Form.useWatch('category1id', categoryFrom)
  const category2id = Form.useWatch('category2id', categoryFrom)
  const category3id = Form.useWatch('category3id', categoryFrom)
  // 切换页面时保持不变
  const storeca1id = getcategory1id(storeData)
  const storeca2id = getcategory2id(storeData)
  const storeca3id = getcategory3id(storeData)
  useEffect(() => {
    if (category1id) {
      if (storeca1id !== category1id) {
        categoryFrom.setFieldsValue({
          category2id: undefined,
          category3id: undefined,
        })
      }
      store.dispatch(setCategory2id(undefined))
      store.dispatch(setCategory3id(undefined))
      store.dispatch(getCategory2List(category1id))
    }
  }, [category1id])

  useEffect(() => {
    if (category2id) {
      if (storeca2id !== category2id) {
        categoryFrom.setFieldsValue({
          category3id: undefined,
        })
      }
      store.dispatch(setCategory3id(undefined))
      store.dispatch(getCategory3List(category2id))
    }
  }, [category2id])

  useEffect(() => {
    if (category3id) {
      store.dispatch(setCategory3id(category3id))
    }
  }, [category3id])
  useEffect(() => {
    store.dispatch(getCategory1List())
  }, [])
  useEffect(() => {
    store.subscribe(() => {
      setlazy({})
    })
    let ca1List = category1ListData.map((item) => {
      return {
        value: item.id,
        label: item.name,
      }
    })
    let ca2List = category2ListData.map((item) => {
      return {
        value: item.id,
        label: item.name,
      }
    })
    let ca3List = category3ListData.map((item) => {
      return {
        value: item.id,
        label: item.name,
      }
    })
    setList({
      ca1List,
      ca2List,
      ca3List,
    })
  }, [storeData.category])
  return (
    <div>
      <Card style={{ display: 'flex', justifyContent: 'center' }}>
        <Form form={categoryFrom} layout="inline">
          <FormItem
            label="一级分类"
            initialValue={storeca1id}
            name={'category1id'}
          >
            <Select
              options={showList?.ca1List}
              style={{ width: 220 }}
              disabled={props.disabled}
            ></Select>
          </FormItem>
          <FormItem
            style={lazy}
            initialValue={storeca2id}
            label="二级分类"
            name={'category2id'}
          >
            <Select
              options={showList?.ca2List}
              style={{ width: 220 }}
              disabled={props.disabled}
            ></Select>
          </FormItem>
          <FormItem
            initialValue={storeca3id}
            label="三级分类"
            name={'category3id'}
          >
            <Select
              options={showList?.ca3List}
              style={{ width: 220 }}
              disabled={props.disabled}
            ></Select>
          </FormItem>
        </Form>
      </Card>
    </div>
  )
}

export default Category
